﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <title>Flare Cluster Layer Example</title>
    <link rel="stylesheet" href="//js.arcgis.com/3.18/esri/css/esri.css">

    <style>
        html, body {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
            font-family: Arial, Calibri;
        }

        #map {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            position: relative;
        }

        #header {
            position: absolute;
            z-index: 1000;
            top: 0px;
            left: 0px;
            height: 15px;
            width: 100%;
            font-weight: bold;
            padding: 15px 10px;
        }

          
        #header a {
            margin-left: 20px;
            color: #FFF;
        }

        #header, #menu {
            position: absolute;
            z-index: 1000;
            background-color: rgba(0,0,0,0.7);
            color: #FFF;
            font-size: 0.8em;
        }

        #menu {
            top: 45px;
            left: 0;
            bottom: 0;
            width: 165px;
            padding: 5px 10px;
            border-top: 1px Solid #FFF;
            transition: left ease 0.5s;
        }

            #menu > div {
                margin-top: 10px;
            }

            #menu select {
                height: 25px;
                border-radius: 5px;
                margin-right: 20px;
            }

        #menu.closed {
            left: -190px;
            transition: left ease 0.5s;
        }

        .menu-hamburger {
            position: relative;
            display: inline-block;
            width: 1.25em;
            height: 0.8em;
            margin-right: 0.3em;
            border-top: 0.2em solid #fff;
            border-bottom: 0.2em solid #fff;
            cursor: pointer;
        }

        .menu-hamburger:before {
            content: "";
            position: absolute;
            top: 0.3em;
            left: 0px;
            width: 100%;
            border-top: 0.2em solid #fff;
        }

        #close-menu {
            cursor: pointer;
            position: absolute;
            right: 5px;
            top: 0;
            font-size: 1.5em;
        }

        .esriSimpleSliderTL {
            top: 60px;
            right: 20px;
            left: initial;
        }

    </style>


    <script>
        var dojoConfig = {
            parseOnLoad: false,
            async: true,
            tlmSiblingOfDojo: false,
            packages: [{
                name: "fcl",
                location: location.pathname.replace(/\/[^/]+$/, '') + "/fcl"
            }]
        };
    </script>

    <script src="http://js.arcgis.com/3.18/"></script>
    <script src="DataManager.js"></script>

    <script type="text/javascript">

        var map;
        var graphics;
        var clusterLayer;

       //set some defaults
        var preClustered = false;
        var displaySingleFlaresAtCount = 10;
        var areaDisplayMode = "hover";

        require(["esri/map", "esri/layers/graphics", "esri/graphic", "esri/dijit/PopupTemplate", "fcl/FlareClusterLayer_v3",
               "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/renderers/ClassBreaksRenderer",
                "dojo/ready", "dojo/json", "dojo/dom", "dojo/on", "dojo/text!./data.json"],
        function (Map, GraphicsLayer, Graphic, PopupTemplate, FlareClusterLayer, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, ClassBreaksRenderer, ready, JSON, dom, on, data) {

            //load up the dummy data
            var allData = JSON.parse(data);
            DataManager.setData(allData);

            ready(function () {

                document.getElementById("clustering-mode").value = preClustered ? "server" : "client";
                document.getElementById("area-mode").value = areaDisplayMode;

                map = new Map("map", {
                    center: [133, -25],
                    zoom: 4,
                    basemap: "gray",
                    minZoom: 3
                });

                map.on("load", function () {
                    initLayer();
                });

                //for preclustered data, clear and re-get the data on every zoom or pan
                map.on("pan-start", function () {
                    if (preClustered) {
                        clusterLayer.clear();
                    }
                });

                map.on("pan-end", function () {
                    if (preClustered) {
                        getPreClusteredGraphics();
                    }
                });

                map.on("zoom-end", function () {
                    if (preClustered) {
                        getPreClusteredGraphics();
                    }
                });

            });


            function initLayer() {

                //init the layer, more options are available and explained in the cluster layer constructor
                clusterLayer = new FlareClusterLayer({
                    id: "flare-cluster-layer",
                    spatialReference: new esri.SpatialReference({ "wkid": 4326 }),
                    subTypeFlareProperty: "facilityType",
                    singleFlareTooltipProperty: "name",
                    displaySubTypeFlares: true,
                    displaySingleFlaresAtCount: displaySingleFlaresAtCount,
                    flareShowMode: "mouse",
                    preClustered: preClustered,
                    clusterRatio: 75,
                    clusterAreaDisplay: areaDisplayMode,
                    clusteringBegin: function () {
                        console.log("clustering begin");
                    },
                    clusteringComplete: function () {
                        console.log("clustering complete");
                    }
                });

                //set up a class breaks renderer to render different symbols based on the cluster count. Use the required clusterCount property to break on.
                var defaultSym = new SimpleMarkerSymbol().setSize(6).setColor("#FF0000").setOutline(null)
                var renderer = new ClassBreaksRenderer(defaultSym, "clusterCount");
                var xlSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 32, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([200, 52, 59, 0.8]), 1), new dojo.Color([250, 65, 74, 0.8]));
                var lgSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 28, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([41, 163, 41, 0.8]), 1), new dojo.Color([51, 204, 51, 0.8]));
                var mdSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 24, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([82, 163, 204, 0.8]), 1), new dojo.Color([102, 204, 255, 0.8]));
                var smSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 22, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([230, 184, 92, 0.8]), 1), new dojo.Color([255, 204, 102, 0.8]));
                renderer.addBreak(0, 19, smSymbol);
                renderer.addBreak(20, 150, mdSymbol);
                renderer.addBreak(151, 1000, lgSymbol);
                renderer.addBreak(1001, Infinity, xlSymbol);

                if (areaDisplayMode) {
                    //if area display mode is set. Create a renderer to display cluster areas. Use SimpleFillSymbols as the areas are polygons
                    var defaultAreaSym = new SimpleFillSymbol().setStyle(SimpleFillSymbol.STYLE_SOLID).setColor(new dojo.Color([0, 0, 0, 0.2])).setOutline(new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0, 0, 0, 0.3]), 1));
                    var areaRenderer = new ClassBreaksRenderer(defaultAreaSym, "clusterCount");
                    var xlAreaSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([200, 52, 59, 0.8]), 1), new dojo.Color([250, 65, 74, 0.8]));
                    var lgAreaSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([41, 163, 41, 0.8]), 1), new dojo.Color([51, 204, 51, 0.8]));
                    var mdAreaSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([82, 163, 204, 0.8]), 1), new dojo.Color([102, 204, 255, 0.8]));
                    var smAreaSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([230, 184, 92, 0.8]), 1), new dojo.Color([255, 204, 102, 0.8]));

                    areaRenderer.addBreak(0, 19, smAreaSymbol);
                    areaRenderer.addBreak(20, 150, mdAreaSymbol);
                    areaRenderer.addBreak(151, 1000, lgAreaSymbol);
                    areaRenderer.addBreak(1001, Infinity, xlAreaSymbol);

                    //use the custom overload of setRenderer to include the renderer for areas.
                    clusterLayer.setRenderer(renderer, areaRenderer);
                }
                else {
                    clusterLayer.setRenderer(renderer); //use standard setRenderer.
                }


                //set up a popup template
                var template = new PopupTemplate({
                    title: "{name}",
                    fieldInfos: [
                      { fieldName: "facilityType", label: "Facility Type", visible: true },
                      { fieldName: "postcode", label: "Post Code", visible: true },
                      { fieldName: "isOpen", label: "Opening Hours", visible: true }
                    ]
                });
                clusterLayer.infoTemplate = template;
                map.infoWindow.titleInBody = false;

                map.addLayer(clusterLayer);

                //get the first set of data
                if (preClustered) {
                    getPreClusteredGraphics();
                }
                else {
                    //not preclustered - just add the raw data to be clusted within the layer.
                    var data = DataManager.getData();
                    clusterLayer.addData(data);
                }
            }

            function clearLayer() {
                map.removeLayer(clusterLayer);
                clusterLayer = null;
            }

            function getPreClusteredGraphics() {

                var maxSingleFlareCount = displaySingleFlaresAtCount;

                var clusterRatio = 75;
                var clusteredData = DataManager.fakeServerSideClustering(clusterRatio, maxSingleFlareCount, areaDisplayMode, map);
                clusterLayer.addPreClusteredData(clusteredData);

            }

            //setup some event handlers to handler change of options
            on(dom.byId("clustering-mode"), "change", function (evt) {
                clearLayer();
                preClustered = this.value === "server" ? true : false;
                initLayer();
            });

            on(dom.byId("area-mode"), "change", function (evt) {
                clearLayer();
                areaDisplayMode = this.value;
                initLayer();
            });

            on(dom.byId("menu-switch"), "click", function (evt) {
                var menu = dom.byId("menu");
                if (menu.classList.contains("closed")) {
                    menu.classList.remove("closed");
                }
                else {
                    menu.classList.add("closed");
                }
            });

            on(dom.byId("close-menu"), "click", function (evt) {
                var menu = dom.byId("menu");
                menu.classList.add("closed");
            });

        });


    </script>


</head>
<body>

    <div id="map">

        <div id="header">
            <span id="menu-switch" class="menu-hamburger" title="Show/hide options"></span>
            <span>Flare cluster layer - API v3.x</span>
            <a href="index_v4.html" >Goto v4 example</a>
        </div>

        <div id="menu" >
            <span id="close-menu" title="Hide options">&times</span>
            <div><label for="clustering-mode">Clustering mode:</label></div>
            <div>
                <select id="clustering-mode">
                    <option value="server">Fake server side</option>
                    <option value="client">Client side</option>
                </select>
            </div>

            <hr />
            <div><label for="area-mode">Display cluster area mode:</label></div>
            <div>
                <select id="area-mode">
                    <option value="">None</option>
                    <option value="hover">Hover</option>
                    <option value="always">Always</option>
                </select>
            </div>
        </div>

    </div>

</body>
</html>
